<template>
  <div>
    <div style="display: flex">
      <el-card class="box-card" style="margin-top: 20px;width: 30%; margin-left: 3%">
        <div slot="header" class="d-flex align-items-center">
          <span style="margin-right: 80px">创业经历</span>
          <el-button style="float: right; padding: 3px 0" type="text">more<i class="el-icon-d-arrow-right"></i></el-button>
        </div>
        <div v-for="(item,key) in Info1" :key="key">
          <div style="display: flex">
            <span>
              <router-link tag="span" :to="'/otherArticle/id/'+item.id+'/tableName/'+'sys_business'" class="news-title">{{item.title}}
              </router-link>
            </span>
          </div>
        </div>
      </el-card>
      <el-card class="box-card" style="margin-top: 20px;width: 30%; margin-left: 2%">
        <div slot="header" class="d-flex align-items-center">
          <span style="margin-right: 80px">创业方向</span>
          <el-button style="float: right; padding: 3px 0" type="text">more<i class="el-icon-d-arrow-right"></i></el-button>
        </div>
        <div v-for="(item,key) in Info2" :key="key">
          <div style="display: flex">
            <span>
              <router-link tag="span" :to="'/otherArticle/id/'+item.id+'/tableName/'+'sys_business'" class="news-title">{{item.title}}
              </router-link>
            </span>
          </div>
        </div>
      </el-card>
      <el-card class="box-card" style="margin-top: 20px;width: 30%; margin-left: 2%">
        <div slot="header" class="d-flex align-items-center">
          <span style="margin-right: 80px">政府扶持项目</span>
          <el-button style="float: right; padding: 3px 0" type="text">more<i class="el-icon-d-arrow-right"></i></el-button>
        </div>
        <div v-for="(item,key) in Info3" :key="key">
          <div style="display: flex">
            <span>
              <router-link tag="span" :to="'/otherArticle/id/'+item.id+'/tableName/'+'sys_business'" class="news-title">{{item.title}}
              </router-link>
            </span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="business_info">
      <el-card>
        <div>
          <span style="font-size: 20px">创业合伙人</span>
          <el-button @click="Recruitment" style="margin-left: 20px;margin-right:10px;float: right" type="text">more
            <i class="el-icon-d-arrow-right"></i>
          </el-button>
          <el-Button style="float: right" @click="publishBusinessInfo">发布创业信息</el-Button>
        </div>
        <el-divider></el-divider>
        <div v-for="(item,key) in BusinessInfo" :key="key">
          <div style="margin-bottom: 10px">
            <span>发起人：{{item.sponsor}}</span><br>
            <el-row>
                  <el-col :span="6">
                        <span>工作地点：</span>
                        <span>{{item.work_address}}</span>
                    </el-col>
                    <el-col :span="6">
                        <span>工作类型：</span>
                        <span>{{item.kind}}</span>
                    </el-col>
            </el-row>
            <el-row>
                  <el-col :span="6">
                    <span>工作时长：</span><span>{{item.duration}}</span>
                  </el-col>
                  <el-col :span="6">
                      <span>工资：</span><span style="margin-right: 20px">{{item.salary}}</span>
                  </el-col>
                  <el-col :span="6">
                        <span>所需人数：</span><span>{{item.need_number}}人</span>
                  </el-col>
            </el-row>
            <span>工作介绍：</span>
            <el-input type="textarea"
              :value="item.introduction"
              :disabled="true">
            </el-input><br>
            <span>是否审核通过：
              <el-tag v-show="item.is_pass == 0 ? true : false" type="info">未审核</el-tag>
              <el-tag v-show="item.is_pass == 1 ? true : false" type="danger">已审核未通过</el-tag>
              <el-tag v-show="item.is_pass == 2 ? true : false">已审核通过</el-tag>
            </span>
          </div>
          <hr>
        </div>
      </el-card>
    </div>
    <div class="first_news_container">
      <el-card class="SoHu">
        <div class="news_header">
          <span style="font-size: 25px; margin-left: 20px">搜狐新闻</span>
          <el-button style="margin-left: 490px;margin-right:10px" type="text">
            <router-link tag="span" :to="'/newsList/news_type/'+'搜狐新闻'+'/sql/'+'sys_sohu'+'/kind/'+ 1" class="news-title">
              more<i class="el-icon-d-arrow-right"></i>
            </router-link>
          </el-button>
        </div>
        <hr/>
        <div v-for="(so, key) in SoHu" :key="key">
          <div class="news_content">
            <span class="title">{{so.title}}</span>
            <span class="pubtime" style="float: right;">{{so.pubtime.substring(0,10)}}</span>
          </div>
          <hr/>
        </div>
      </el-card>
      <el-card class="People">
        <div class="news_header">
          <span style="font-size: 25px; margin-left: 20px">人民网</span>
          <el-button style="margin-left: 490px;margin-right:10px" type="text">
            <router-link tag="span" :to="'/newsList/news_type/'+'人民网'+'/sql/'+'sys_people'+'/kind/'+ 1" class="news-title">
              more<i class="el-icon-d-arrow-right"></i>
            </router-link>
          </el-button>
        </div>
        <hr/>
        <div v-for="(peo, key) in People" :key="key">
          <div class="news_content">
            <span class="title">{{peo.title}}</span>
            <span class="pubtime">{{peo.pubtime.substring(0,10)}}</span>
          </div>
          <hr/>
        </div>
      </el-card>
    </div>
    <div class="second_news_container">
      <el-card class="Pengpai">
        <div class="news_header">
          <span style="font-size: 25px; margin-left: 20px">澎湃新闻</span>
          <el-button style="margin-left: 490px;margin-right:10px" type="text">
            <router-link tag="span" :to="'/newsList/news_type/'+'澎湃新闻'+'/sql/'+'sys_pengpai'+'/kind/'+ 1" class="news-title">
              more<i class="el-icon-d-arrow-right"></i>
            </router-link>
          </el-button>
        </div>
        <hr/>
        <div v-for="(peng, key) in PengPai" :key="key">
          <div class="news_content">
            <span class="title">{{peng.title}}</span>
            <span class="pubtime">{{peng.pubtime.substring(0,10)}}</span>
          </div>
          <hr/>
        </div>
      </el-card>
      <el-card class="China">
        <div class="news_header">
          <span style="font-size: 25px; margin-left: 20px">中国网</span>
          <el-button style="margin-left: 490px;margin-right:10px" type="text">
            <router-link tag="span" :to="'/newsList/news_type/'+'中国网'+'/sql/'+'sys_china'+'/kind/'+ 1" class="news-title">
              more<i class="el-icon-d-arrow-right"></i>
            </router-link>
          </el-button>
        </div>
        <hr/>
        <div v-for="(china, key) in China" :key="key">
          <div class="news_content">
            <span class="title">{{china.title}}</span>
            <span class="pubtime">{{china.pubtime.substring(0,10)}}</span>
          </div>
          <hr/>
        </div>
      </el-card>
    </div>
    <div class="third_news_container">
      <el-card class="CCTV">
        <div class="news_header">
          <span style="font-size: 25px; margin-left: 20px">央视新闻</span>
          <el-button style="margin-left: 490px;margin-right:10px" type="text">
            <router-link tag="span" :to="'/newsList/news_type/'+'央视新闻'+'/sql/'+'sys_cctv'+'/kind/'+ 1" class="news-title">
              more<i class="el-icon-d-arrow-right"></i>
            </router-link>
          </el-button>
        </div>
        <hr/>
        <div v-for="(cctv, key) in CCTV" :key="key">
          <div class="news_content">
            <span class="title">{{cctv.title}}</span>
            <span class="pubtime">{{cctv.pubtime.substring(0,10)}}</span>
          </div>
          <hr/>
        </div>
      </el-card>
      <el-card class="XinHua">
        <div class="news_header">
          <span style="font-size: 25px; margin-left: 20px">新华网</span>
          <el-button style="margin-left: 490px;margin-right:10px" type="text">
            <router-link tag="span" :to="'/newsList/news_type/'+'新华网'+'/sql/'+'sys_xinhua'+'/kind/'+ 1" class="news-title">
              more<i class="el-icon-d-arrow-right"></i>
            </router-link>
          </el-button>
        </div>
        <hr/>
        <div v-for="(xin, key) in XinHua" :key="key">
          <div class="news_content">
            <span class="title">{{xin.title}}</span>
            <span class="pubtime">{{xin.pubtime.substring(0,10)}}</span>
          </div>
          <hr/>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      SoHu: [],
      People: [],
      CCTV: [],
      China: [],
      XinHua: [],
      PengPai: [],
      BusinessInfo: [],
      Info1: [],
      Info2: [],
      Info3: []
    }
  },
  methods: {
    getNews (news, newsType, current, size) {
      this.$axios.get('news/getBusinessNews', {
        params: {
          current: 1,
          size: size,
          news_type: newsType
        }
      }).then(response => {
        console.log(response.data)
        this.$set(this, news, response.data.data.records)
        this.total = response.data.data.total
        this.pageSize = response.data.data.size
        this.currentPage = response.data.data.current
      }).catch(error => {
        console.log(error)
      })
    },
    getBusinessinfo (size) {
      this.$axios.get('publishInfo/getInfo', {
        params: {
          current: 1,
          size: size,
          mytype: 1
        }
      }).then(response => {
        console.log(response.data)
        this.$set(this, 'BusinessInfo', response.data.data.records)
        this.total = response.data.data.total
        this.pageSize = response.data.data.size
        this.currentPage = response.data.data.current
      }).catch(error => {
        console.log(error)
      })
    },
    publishBusinessInfo () {
      this.$router.push('/publishInfo')
    },
    toNewsList (newsType, SQLName) {
      this.$router.push({ name: 'newsList', params: { news_type: newsType, sql: SQLName, kind: 1 } })
    },
    getInfo (Info, tableName, Mykind) {
      this.$axios.get('news/info', {
        params: {
          table_name: tableName,
          kind: Mykind
        }
      }).then(response => {
        console.log(response.data)
        this.$set(this, Info, response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    Recruitment () {
      this.$router.push({ name: 'recruit', params: { mytype: 1 } })
    }
  },
  mounted () {
    this.getNews('SoHu', 'sys_sohu', 0, 10)
    this.getNews('People', 'sys_people', 0, 10)
    this.getNews('CCTV', 'sys_cctv', 0, 10)
    this.getNews('China', 'sys_china', 0, 10)
    this.getNews('XinHua', 'sys_xinhua', 0, 10)
    this.getNews('PengPai', 'sys_pengpai', 0, 10)
    this.getBusinessinfo(5)
    this.getInfo('Info1', 'sys_business', 1)
    this.getInfo('Info2', 'sys_business', 2)
    this.getInfo('Info3', 'sys_business', 3)
  }
}
</script>

<style lang="less" scoped>
.business_info{
  margin-top: 20px;
  margin-left: 3%;
  margin-right: 35px;
  width: 94.3%;
}
.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.first_news_container{
  margin-top: 20px;
  margin-left: 3%;
  display: flex;
}
.second_news_container{
  margin-top: 20px;
  margin-left: 3%;
  display: flex;
}
.third_news_container{
  margin-top: 20px;
  margin-left: 3%;
  display: flex;
  margin-bottom: 40px;
}
.SoHu{
  margin-top: 0px;
  background-color: white;
  margin-right: 2.5%;
}
.People{
  margin-left: 1%;
}
.Pengpai{
  margin-top: 0px;
  background-color: white;
  margin-right: 2.5%;
}
.China{
  margin-left: 1%;
}
.CCTV{
  margin-top: 0px;
  background-color: white;
  margin-right: 2.5%;
}
.XinHua{
  margin-left: 1%;
}
.news_header{
  display: flex;
  background-color: white;
}
.news_content{
  display: flex;
  color: rgb(146, 143, 143);
}
.news_content > span.title{
  margin-left: 10px;
  width: 550px;
}
</style>
